<template>
  <emap-flow-next-step
      ref="nextStep"
      v-model="nextAssignees"
      :def-key="defKey"
      :task-id="taskId"
      :def-id="defid"
      :show-next-node="showNextNode"
      :multiple = "multiple"
      :defaultCustom = "defaultCustom"
      :one-leg-kicking="oneLegKicking"
      :submitformdata="processedFormData"
      :show-next-assignees="showNextAssignees"
      style="margin: 10px auto 100px;"
      class="form_render_next_step"
      :style="{width: flowCommentWidth}">
  </emap-flow-next-step>
</template>
<script>

// const turing = window["tg-turing"];
// const params = turing.utils.getUrlParam();

export default {
  name: 'flow-next-step',
  data() {
    return {
      nextAssignees: null,
    }
  },
  props: {
    defKey: String, 
    taskId: String,
    defid: String,
    showNextNode: {
      type: Boolean,
      default: false
    },
    showNextAssignees: {
      type: Boolean,
      default: true
    },
    oneLegKicking: {
      type: Boolean,
      default: false
    },
    models: [Array, Object],
    formDataChange: Object,
    flowConfig: Object,
    item: Object,
    multiple: {
      type: Boolean,
      default: true
    },
    defaultCustom: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    flowCommentWidth: function() {
      var style = {}
      if(document.getElementsByClassName('bh-paper-pile-dialog-container').length >0){
        style = document.getElementsByClassName('bh-paper-pile-dialog-container')[0].style
      }else{
        style = document.getElementsByClassName('bh-mb-16')[0].style
      }
      var width = style.width;
      var padding = style.paddingLeft;
      if (!padding) {
        return width
      } else {
        return parseInt(width.slice(0, -2)) - parseInt(padding.slice(0, -2)) * 2 + "px";
      }
    },
    processedFormData: function() {
      return this.serialize(this.formDataChange, this.models.meta)
    },
  },
  mounted() {
    
  },
  methods: {
    serialize: function(formData, model) {
      var cloneData = JSON.parse(JSON.stringify(formData));
      for (var prop in cloneData) {
        if (model[prop] !== undefined && model[prop].xtype !== undefined) {
          switch (model[prop].xtype) {
            case "checkboxlist":
            case "date-range":
            case "multi-select":
              if (cloneData[prop] instanceof Array) {
                  cloneData[prop] = cloneData[prop].join(",");
              } else {
                  // cloneData[prop] = "";
              }
              break;
            case "select":
              if(model[prop].multiple && cloneData[prop] instanceof Array){
                cloneData[prop] = cloneData[prop].join(",");
              }
              break;
            default:
              break;
          }
        }
      }
      return cloneData;
    },
    getValue () {
      return this.nextAssignees
    },
    setValue (val) {
      return this.nextAssignees = val && val[this.item.options.tableName] || []
    },
    validate () {
      return this.$refs.nextStep.validate()
    },
    refresh (data) {
      //formchange的时候把数据传给下一环节组件，去更新下一环节应该是哪个环节
      this.$refs.nextStep.linkFormChange(data)
    }
  }
}

</script>

<style lang="less">
  .form_render_next_step {
    .emap-flow-item-label {
      height: 36px;
      line-height: 36px;
      background: #F0F1F9;
      font-weight: 700;
      font-size: 12px;
    }

    .emap-flow-item-content {
      padding: 2px 2px 2px 12px;
    }
  }
</style>
